<template>
  <div>
    <crumbs :BreadCrumb="BreadCrumb"></crumbs>
    <div class="top_b">
      <el-form :inline="true" :model="searchForm" ref="ruleFormed">
        <div>
          <el-form-item label="体检编号" style="white-space: nowrap;" :label-width="formLabelWidth" @keyup.enter.native="getList">
            <el-input class="input_c" v-model="searchForm.orderNo" clearable></el-input>
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input class="input_c" v-model="searchForm.customerName" clearable></el-input>
          </el-form-item>
          <el-form-item label="证件号" :label-width="formLabelWidth" prop="chineseName">
            <el-input class="input_c" v-model="searchForm.credNum" clearable></el-input>
          </el-form-item>
          <el-form-item label="单位名称" :label-width="formLabelWidth">
            <el-input class="input_c" v-model="searchForm.enterpriseName" clearable></el-input>
          </el-form-item>
          <el-form-item label="二级部门" :label-width="formLabelWidth">
            <el-input class="input_c" v-model="searchForm.twoLevelDeptName" clearable></el-input>
          </el-form-item>
          <el-form-item label="合同名称" :label-width="formLabelWidth">
            <el-input class="input_c" v-model="searchForm.contractName" clearable></el-input>
          </el-form-item>
          <el-form-item label-width="110px" label="体检日期">
            <el-date-picker
                v-model="orderDateRange"
                type="daterange"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="" :label-width="formLabelWidth">
            <el-button @click="getList()" type="primary">查找</el-button>
          </el-form-item>
        </div>
        <div>
        </div>

      </el-form>
    </div>
    <!-- 列表 -->
    <div>
      <div class="date">
        <span>待初检总人数：{{ countData.waitVerifyCount }}人</span>
        <span style="margin: 0 20px;">完成初检人数：{{ countData.finishVerifyCount }}</span>
        <span>未初检人数: {{ countData.noVerifyCount }}人</span>
        <span style="margin: 0 20px;">本人完成初检人数:{{ countData.myFinishVerifyCount }}人</span>
      </div>
      <el-table
          ref="multipleTable"
          :data="list"
          tooltip-effect="dark"
          style="width: 100%;margin-top:5px"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            label="体检单号"
            prop="orderNo"
            width="150">
        </el-table-column>
        <el-table-column
            prop="customerName"
            label="姓名"
            width="150">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别"
            width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.sex == 1 ? "女" : scope.row.sex == 2 ? "男" : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="age"
            label="年龄"
            width="80">
        </el-table-column>
        <el-table-column
            prop="telephone"
            label="联系方式"
            width="150">
        </el-table-column>
        <el-table-column
            prop="enterpriseName"
            label="单位名称"
            width="150">
        </el-table-column>
        <el-table-column
            prop="examType"
            label="体检类型"
            width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.examType|exam }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="packageCustomname"
            label="体检套餐"
            width="150">
        </el-table-column>
        <el-table-column
            prop="status"
            label="体检状态"
            width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.status|state }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="signDatetime"
            label="体检时间"
            width="150">
          <template slot-scope="scope">
            {{ scope.row.signDatetime|formatDate }}
          </template>
        </el-table-column>
        <el-table-column width="180" prop="address" label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button  v-if="scope.row.status<32"  @click="toEditPage(scope.row,'edit')" type="primary" size="small">
              复检
            </el-button>
            <el-button v-else @click="toEditPage(scope.row,'view')" type="primary" size="small">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import crumbs from "../../views/Crumbs.vue";
import {formatTimeToStr, getFirstDayOfWeek} from "@src/common/utils/date";

export default {
  components: {
    crumbs,
  },
  data() {
    return {
      formLabelWidth: '90px',
      searchForm: {},
      orderDateRange:[],
      pageSize: 10,
      pageNo: 1,

      countData: {},

      BreadCrumb: [
        {path: "", name: "检后管理"},
        {path: "", name: "复检结论"},
      ],
      list: [],
      value1: "",
      // 页码
      // pageSize: 10,
      // pageNo: 1,
      total: 0,
      id: null,
      title: "",
      queryform: {},
      checkform: {},
      multipleTable: [],
    }
  },
  filters: {
    exam: function (item) {
      let st
      switch (item) {
        case 1:
          st = "普通体检"
          break;
        case 2:
          st = "单位体检"
          break;
        case 3:
          st = "入职体检"
          break;
        case 4:
          st = "职业体检"
          break;
        case 5:
          st = "婚育体检"
          break;
        case 6:
          st = "老年专项体检"
          break;
        case 7:
          st = "健康体检"
          break;
        default:
          st = ""
          break;
      }
      return st
    },
    state: function (item) {
      let st
      switch (item) {
        case 1:
          st = "未登记"
          break;
        case 2:
          st = "登记"
          break;
        case 4:
          st = "检中"
          break;
        case 8:
          st = "交表"
          break;
        case 16:
          st = "初检"
          break;
        case 32:
          st = "复检"
          break;
        default:
          st = "异常"
          break;
      }
      return st
    },
    formatDate: function (time) {
      if (time != null && time !== "") {
        var date = new Date(time);
        return formatTimeToStr(date, "yyyy-MM-dd hh:mm");
      } else {
        return "";
      }
    },
  },
  created() {
    this.orderDateRange=[
      formatTimeToStr(new Date(new Date().setMonth(new Date().getMonth() - 1)), "yyyy-MM-dd"),
      formatTimeToStr(new Date(), "yyyy-MM-dd")
    ]
    this.getList()
    this.getCount()
  },
  methods: {
    toEditPage(row, action) {
      localStorage.setItem("recheck_ordersId", row.id);
      localStorage.setItem("recheck_action", action);
      this.$router.push({name: "recheckSave"});
    },
    getList() {
      if(this.orderDateRange && this.orderDateRange.length===2){
        this.searchForm.startSignDatetime = formatTimeToStr(this.orderDateRange[0], "yyyy-MM-dd")
        this.searchForm.endSignDatetime = formatTimeToStr(this.orderDateRange[1], "yyyy-MM-dd")
      }else {
        delete this.searchForm.startSignDatetime
        delete this.searchForm.endSignDatetime
      }
      this.doGetList(this.searchForm)
    },
    doGetList(req) {
      this.$axios
          .getReviewPeOrdersMainList(req).then(res => {
        if (res.code === "00000") {
          this.list = res.data.records
          this.total = res.data.total
          if (this.list.length === 1 && req.orderNo) {
             const row = this.list[0]
              let action = 'view'
              if(row.status<32){
                action = 'edit'
              }
            localStorage.setItem("recheck_ordersId", row.id);
            localStorage.setItem("recheck_action", action);
            this.$router.push({name: "recheckSave", query: {ordersId: row.id}});
          }
        }
      })
    },
    getCount() {
      this.$axios.getVerifyPeOrdersMainCount({
        ...this.searchForm
      }).then(res => {
        if (res.code === "00000") {
          this.countData = res.data
        }
      })
    },
    // 每页几条
    handleSizeChange(val) {
      this.pageSize = val
      const req = {
        ...this.searchForm,
        pageSize: this.pageSize,
        pageNo: this.pageNo,
      }
      this.doGetList(req)
    },
    // 第几页
    handleCurrentChange(val) {
      this.pageNo = val
      const req = {
        ...this.searchForm,
        pageSize: this.pageSize,
        pageNo: this.pageNo,
      }
      this.doGetList(req)
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  }
}
</script>

<style scoped>
.top_but {
  margin-left: 20px;
}

.top_buts {
  margin-top: 10px;
  margin-bottom: 10px;
}

.pagination {
  text-align: center;
}

.top_b {
  display: flex;
}

.top_inp {
  /* width: 300px; */
  display: flex;
}

.dialog {
  width: 500px;
  margin: 0px auto;
}

/*  */

.el-select {
  width: 300px;
}

.el-select /deep/ .el-input__inner {
  width: 100%;
}

.input_c {
  width: 190px;
}

::v-deep .input_c .el-input__inner {
  width: 100%;
}

::v-deep .el-dialog__body {
  border-bottom: 1px solid #cccccc;
  margin: 0 20px;
  padding: 20px 20px 0px;
  /* padding: 20px; */
}

.date {
  padding-bottom: 20px;
  color: #7F7F7F;
  font-weight: bold;
}

.info_l {
  /* width: 80%; */
  margin: 0px auto;
}

.info_l_input {
  width: 82%;
}

.info_l_button {
  margin-left: 10px;
}

.info_sel_r_groupn {
  margin-left: 40px;
}

.info_sel_r_group {
  margin-left: 10px;
}

.info_sel {
  display: flex;
}

.info_sel_l {
  width: 50%;
}

.info_sel_r {
  width: 50%;
  margin-left: 50px;
}

.info_sel_r_img {
  width: 180px;
  height: 220px;
  margin: 0px auto;
}

.avatar-uploader {
  margin: 0px auto;
  text-align: center;
}

.info_l /deep/ .el-select {
  width: 100%;
}

.info_l_head {
}

.el-table th > .cell {
  white-space: nowrap;
}

.add_info {
  display: flex;
}

.message {
  line-height: 50px;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 10px;
}

.radios {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #cccccc;
}

.info_r {
  margin-left: 20px;
}

.tab_b {
  display: flex;
  justify-content: space-between;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
}

.tab_c {
  display: flex;
}

.radios_c {
  width: 35%;
  display: flex;
  justify-content: space-between;
}

.date > span {
  margin-top: 30px;
}
</style>
